<template>
  <div class="home">
    home
    <p>
      <button @click="toggleCity">{{ city }}</button>
    </p>
    <music-item v-for="item of musics" :key="item.id" :item="item"></music-item>
  </div>
</template>

<script>
import { computed, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import MusicItem from "./components/MusicItem.vue";
import axios from "axios";
export default {
  name: "Home",
  components: { MusicItem },
  setup() {
    const store = useStore();
    const state = reactive({
      musics: [],
      toggleCity() {
        this.$router.push("/city");
      },
      city: computed(() => {
        return store.state.CityHook.city;
      }),
    });
    onMounted(() => {
      axios.get("http://122.112.161.135:3000/top/playlist").then((res) => {
        state.musics = res.data.playlists;
      });
    });
    const refState = toRefs(state);
    return {
      ...refState,
    };
  },
};
</script>

<style scoped>

</style>